<template>
  <div class="hor-layout-center-all">
    <el-input v-model="jsonStr" @click.native="showJsonMap" type="textarea" class="json-input-layout"></el-input>
    <json-dialog ref="jsonDialog" @objDataBack="objDataBack"></json-dialog>
  </div>
</template>

<script>
import jsonDialog from "./components/json-dialog";

export default {
  name: "index",
  components: {jsonDialog},
  data() {
    return {
      jsonStr: "{\"a\":\"1\",\"b\":32,\"c\":\"true\",\"zzz\":{\"aa\":\"3\",\"b\":33}}",
    }
  },
  methods: {
    showJsonMap() {
      this.$refs.jsonDialog.openDialog(this.jsonStr)
    },
    objDataBack(dataStr) {
      this.jsonStr = dataStr
    }
  }
}
</script>

<style scoped>
.json-input-layout {
  width: 300px;
  margin-top: 20vh;
  background: #b9b9b9;
  padding: 10px;
  border-radius: 5px;
}
</style>
